<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../static/css/index.css" />
  <title>从数据库查询到的数据显示到table列表中</title>
  <script src="../../static/js/jquery-3.6.3-min.js"></script>
  <script src="../../static/js/common.js"></script>

</head>

<body>
  <!-- <div><a href="/books/add">添加新书</a></div>
  <div class="tab">
    <table border="1px">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
          <th class="prominent">昵称</th>
          <th>删除</th>
          <th>修改</th>
        </tr>
      </thead>
      <tbody>
        {% for abook in booksc %}
        <tr>
          <td>{{abook.id}}</td>
          <td>{{abook.uname}}</td>
          <td>{{abook.pwd}}</td>
          <td>{{abook.nickname}}</td>
          <td><a href="/books/del/{{abook.id}}">删除</a></td>
          <td><a href="/books/mod/{{abook.id}}">修改</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div> -->
  <p>
    <button id="btn">显示</button>
  </p>


  <div class="tab">
    <table border="1px">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>密码</th>
          <th class="prominent">昵称</th>
        </tr>
      </thead>
      <tbody id="shows">
      </tbody>
    </table>
  </div>

  <script>

    $(function () {
      $('#btn').click(function () {
        var xhr = createXhr();
        var url = '/user/getuser_listsc/';
        xhr.open('get', url, true);
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            // 字符串切割
            //var users = xhr.responseText.split('|')
            //console.log(users)
            var html = ''
            //for (var ids = 0; ids < users.length; ids++) {
            //  // console.log(users[ids]);
            //  html += '<tr>'
            //  var info = users[ids];
            //  var sd = String(info).split(',');
            //  html += '<td>' + sd[0] + '</td>'
            //  html += '<td>' + sd[1] + '</td>'
            //  html += '<td>' + sd[2] + '</td>'
            //  html += '<td>' + sd[3] + '</td>'
            //  html += '</tr>'
            //}

            // 以上遍历不合理, 使用jq 来遍历服务器传过来的JSON对象
            var users = xhr.responseText
            var obj = JSON.parse(users) // 服务器传过来是文本,这步需要进行反序列化,否则遍历不识别
            $.each(obj, function (i, obj) {
              html += '<tr >'
              html += '<td>' + obj.id + '</td>'
              html += '<td>' + obj.uname + '</td>'
              html += '<td>' + obj.pwd + '</td>'
              html += '<td>' + obj.nickname + '</td>'
              html += '</tr>'
            })

            // console.log(obj)
            $('#shows').html(html)

            // 获取表格中除第一行之外的所有的行
            // 在回调中使用该方法, 在才能追踪动态标签鼠标移动事件
            $("tr:not(tr:first)").each(function (index, value) {
              // 得到每一项转成jq对象进行鼠标移入移出事件绑定
              // mouseover鼠标移入事件绑定
              $(value).on("mouseover", function () {
                $(value)
                  .css({
                    "background-color": "#008c8c",
                    "box-shadow": "0 0 20px #008d8d",
                  })
                  // mouseout鼠标移出事件绑定
                  .on("mouseout", function () {
                    $(value).css({
                      "background-color": "#e4f0f5",
                      "box-shadow": "none",
                    });
                  });
              });
            });
          }
        }
        xhr.send()
      })

    })
  </script>
  <!-- 这里引入没法识别动态添加的标签, 只能在回调中使用该方法 -->
  <!-- <script src="../../static/js/index.js"></script> -->
</body>

</html>